<template>
	<view v-if="startState">
		<image :src="bannerData.url" mode="aspectFill" style="width: 100vw; height: 100vh"></image>
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="countdown" @click="jumpTab">跳过</view>
		<!-- #endif -->
	</view>
	<view v-else class="content">
		<image src="/static/logo.png" class="log"></image>
		<view class="text-w z-font-32">降杆</view>
		<view class="text-w z-font-40 uni-mt-52">高尔夫运动智慧社区</view>
		<view class="bottom-button" @click="toIndex(2)">开启降杆之旅(学员入口)</view>
		<view class="coach-terminal" @click="toIndex(1)">教练端入口</view>
	</view>
</template>

<script setup>
import { getBanner } from '@/api/index.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

// 0|空 未选择身份  1 教练端 2 学员端
const startState = ref(uni.getStorageSync('start-state') || 0);
// #ifdef MP-WEIXIN
startState.value = 2
uni.setStorageSync('start-state', 2)
// #endif
const bannerData = reactive({});
let timepiece;
getBanner().then((res) => {
	Object.assign(bannerData, res);
	if (startState.value) {
		timepiece = setTimeout(() => {
			jumpTab();
		}, bannerData.delayed);
	}
});



function jumpTab() {
	setTimeout(() => {
		clearTimeout(timepiece);
		const token = uni.getStorageSync('token')
		if (token) uni.switchTab({
			url: '/pages/tabbar-page/tabbar-0'
		});
		else uni.reLaunch({
			url: '/pages/my/login/login'
		})
		
	})
} 

function toIndex(type) {
	uni.setStorageSync('start-state', type);
	startState.value = type
	timepiece = setTimeout(() => {
		jumpTab();
	}, 3000);
}

// #ifdef APP-PLUS
plus.navigator.closeSplashscreen();
// #endif
</script>

<style lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: url($oss_pub_domain + '/app-img/start/start-bg.png') no-repeat;
	background-size: 100% 100%;
	text-align: center;
	box-sizing: border-box;
	padding-top: 18vh;
}
.log {
	width: 128rpx;
	height: 128rpx;
}
.bottom-button {
	width: 520rpx;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	background: #008965;
	color: #fff;
	border-radius: 58rpx;
	font-size: 32rpx;
	margin: 112rpx auto 0;
}

.coach-terminal {
	width: 250rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 38rpx;
	border: 1rpx solid #008965;
	color: #008965;
	background: rgba(0, 137, 101, 0.1);
	border-radius: 40rpx;
	position: fixed;
	right: 40rpx;
	bottom: 108rpx;
}
.countdown {
	position: fixed;
	right: 32rpx;
	top: 100rpx;
	width: 100rpx;
	height: 50rpx;
	border-radius: 10rpx;
	background: rgba(255, 255, 255, 0.2);
	line-height: 50rpx;
	text-align: center;
	color: #ffffff;
}
</style>
